<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
          <el-tag  effect="dark"><i class="el-icon-s-custom"></i>{{userName}}</el-tag>
          <el-tag  effect="dark"><i class="el-icon-s-platform"></i>在线考试系统</el-tag>
        </el-col>
        <el-col :span="8">
          &nbsp;
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary"  size="mini" round @click="backLogin">退出系统</el-button>
          <el-button type="primary" size="mini" round @click="backIndex" >系统首页</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- router 开启路由地址配置-->
        <el-menu
          :default-openeds="['1','2']"
          text-color="white"
          background-color="#333333"
          router>
          <!-- 一级菜单-->
          <!--
            <tr v-for="x in ">
             <td></td>
            </tr>
             <template v-for=">
               <p >222</p>
            </template>
          -->
          <!-- index 菜单索引-->
          <template v-for="x in node ">
            <el-submenu :index="x.index">
              <template slot="title">
                <i :class="x.icon"></i>
                <span >{{x.name}}</span>
              </template>
              <!-- 二级菜单-->
              <template v-if="x.children!=null">

                <template v-for="y in x.children">
                  <!-- index 路由地址-->
                  <el-menu-item :index="y.url"  >
                    <template>
                      <i :class="y.icon"></i>
                      {{y.name}}
                    </template>
                  </el-menu-item>
                </template>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 路由视图-->
        <router-view ></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>

  export default {
    name: "index",
    data() {
      return {
        userName:"",//登录用户名
        node: []
      }
    },
    methods:{
      loadPower(){
        const  _this = this;
        //获取登录的用户名
        const name = sessionStorage.getItem("userName");
        this.$http.get("/user-info/user",{params:{"userName":name}})
          .then(function (rs) {
            console.log(rs.data);
            if(rs.data.code==200){
              _this.node= rs.data.data;

            }
          })
      },

      backIndex(){
        this.$router.push("/shouye");

      },
      backLogin(){
        //回到登录页面
        this.$router.push("/");
        //刷新
        this.$router.go(0);
      }
    },
    created(){

      this.loadPower();

    }

  }
</script>

<style >
  html,
  body {
    height: 100%;
    margin: 0px;
  }

  .el-container {
    height: 100%;
  }


  .el-header {
    background-color: #444444;
    color: white;
    padding-top: 15px;

  }

  .el-aside {
    background-color: #333333;
    color: white;
    height: 100%;
  }

  .el-main {
    background-color: white;
    color: #333;
  }
</style>

